<!DOCTYPE html>
<html lang="en">

<head>
    <title>时间控件</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--插件  -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!--插件——动画  -->
    <link rel="stylesheet" href="css/animate.css">

    <!--插件——字体库  -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!--插件——时间  -->
    <link rel="stylesheet" href="css/plugins/bootstrap-datapicker/datepicker3.css">

    <!--自定义  -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <ol class="breadcrumb">
        <li>表单控件</li>
        <li class="active">时间控件</li>
    </ol>
    <div class="content">
        <div class="row">
            <div class="col-sm-6">
                <h3>时间控件——bootstrap-datepicker</h3>
                <div class="form-group">
                    <label class="font-noraml">简单示例</label>
                    <div class="input-group date" id="date1">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" value="2014-11-11">
                    </div>
                </div>
                <div class="form-group">
                    <label class="font-noraml">年视图</label>
                    <div class="input-group date" id="date2">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" value="2014-11-11">
                    </div>
                </div>
                <div class="form-group">
                    <label class="font-noraml">10年视图</label>
                    <div class="input-group date" id="date3">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" value="2014-11-11">
                    </div>
                </div>
                <div class="form-group">
                    <label class="font-noraml">月份</label>
                    <div class="input-group date" id="date4">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="form-control" value="2014-11-11">
                    </div>
                </div>
                <div class="form-group">
                    <label class="font-noraml">范围选择</label>
                    <div class="input-daterange input-group" id="datepicker">
                        <input type="text" class="input-sm form-control" name="start" value="2017-08-01" />
                        <span class="input-group-addon">到</span>
                        <input type="text" class="input-sm form-control" name="end" value="2017-08-17" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--插件-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!--插件——时间  -->
    <script src="js/plugins/bootstrap-datapicker/bootstrap-datepicker.js"></script>

    <!--自定义JS  -->
    <script src="js/loading.js"></script>

    <script>
        $(function() {
            $('#date1').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

            $('#date2').datepicker({
                startView: 1,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                format: "yyyy-mm-dd"
            });

            $('#date3').datepicker({
                startView: 2,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            $('#date4').datepicker({
                minViewMode: 1,
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                todayHighlight: true
            });

            $('#datepicker').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
        });
    </script>
</body>

</html>